<template>
  <div>
    <div class="top">
      <van-nav-bar
        :border="false"
        title="附近宠物"
        left-arrow
        @click-left="$router.go(-1)" />
    </div>
    <div class="body">
      <div class="cont" v-for="i in item" :key="i.mid">
        <RouterLink :to="`/neardetail/${i.mid}`">
          <nearPet
            :title="i.title"
            :label="i.label"
            :imgname="i.imgname"
            :fnum="i.fnum"
            :site="i.site">
          </nearPet>
        </RouterLink>
        <span class="icon">
          <van-icon
            @click="like(i.mid)"
            v-if="!icon"
            size="17px"
            name="good-job-o" />
          <van-icon
            class="btn2"
            @click="removeCollect"
            v-else
            size="17px"
            name="good-job" />
          <span ref="asd">{{ i.fnum }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import nearPet from '@/components/nearPet.vue'
import { getAllMessage, updateFanNum } from '@/api/home'
import { Toast } from 'vant'
export default {
  data() {
    return {
      item: [],
      suibian: '',
      num: [],
      icon: false,
      img: '',
      item2: [],
    }
  },
  methods: {
    async getAllMessage() {
      const data = await getAllMessage()
      this.item = data.data.message
      console.log(this.item)
    },

    //获取点赞接口
    // 获取宠物信息
    a() {
      console.log(222222222222)
      console.log('2222222', this.$refs.asd)
    },
    like(tit) {
      this.suibian = tit
      console.log('123', this.$refs.asd.innerHTML)
      // 添加收藏

      if (!this.icon) {
        this.$refs.asd.innerHTML = parseInt(this.$refs.asd.innerHTML) + 1
        console.log(1111)
        updateFanNum({
          uid: this.$store.state.user.uid,
          uname: this.$store.state.user.uname,
          title: this.item.title,
          mid: this.suibian,
          fnum: this.$refs.asd.innerHTML,
        }).then(res => {
          console.log(res)
          if (res.data.status != 200) {
            this.icon = false
            return Toast.fail({ message: '点赞失败!' })
          }
          this.icon = true
          return Toast.success({ message: '点赞成功!' })
        })
      }
    },

    // 删除收藏
    removeCollect() {
      if (this.icon) {
        this.$refs.asd.innerHTML = parseInt(this.$refs.asd.innerHTML) - 1
        updateFanNum({
          uid: this.$store.state.user.uid,
          uname: this.$store.state.user.uname,
          title: this.item.title,
          mid: this.mid,
          fnum: this.$refs.asd.innerHTML,
        }).then(res => {
          console.log(res)
          if (res.data.status != 200) {
            this.icon = true
            return Toast.fail({ message: 'err!' })
          }
          this.icon = false
          return Toast.fail({ message: '已取消点赞!' })
        })
      }
    },
  },
  beforeMount() {
    this.getAllMessage()
  },
  mounted() {
    this.a()
  },
  components: {
    nearPet,
  },
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}

::v-deep .van-nav-bar .van-icon {
  color: black;
}
.body {
  width: 340px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.btn2 {
  color: red;
}
.cont {
  position: relative;

  .icon {
    position: absolute;
    font-size: 17px;
    right: 10px;
    bottom: 30px;
    // z-index: 999;
  }
}
</style>
